<template>
	<view class="container activity-container">
		<view class="class-list">
			<view class="yuan-btn btn-default" :class="item.id===pageType&&'active-btn'" v-for="item in classList"
				:key="item.title" @click="pageTypeChage(item.id)">
				<text class="iconfont" :style="`color:${item.icoColor}`">{{item.ico}}</text>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="page-list" v-for="(item,idx) in pageList" :key="idx">
			<view class="list-top">
				<div class="data-imgico">{{getStateName(item.state)}}</div>
				<image class="data-bg" :src="$resFileUrl+item.imgUrl" mode="aspectFill"></image>
				<view class="data-content">
					<view class="list-title">{{item.title}}</view>
					<view class="list-info iconfont">
						&#xe606; {{$format(item.startDate,'yyyy-MM-dd')}} 至 {{$format(item.endDate,'yyyy-MM-dd')}}
					</view>
					<view class="list-info iconfont">&#xe636; {{item.address}}</view>
				</view>
			</view>
			<view class="list-bottom">
				<!-- <view class="list-header" v-for="item in 5">
					<image class="header-bg" :src="$fileUrl+'认.png'" mode="aspectFill" ></image>
				</view> -->
				<view class="list-content"></view>
				<view class="yuan-btn btn-success" @click="jump('/pages/activity/detail?id='+item.newsId)">活动详情</view>
			</view>
		</view>
		<view class="not-more" v-if="isLoading">加载中...</view>
		<view class="null-page" v-else-if="pageList.length<=0 ">
			<text class="iconfont">&#xe642;</text>
			<view class="null-page-tips">暂无数据~</view>
		</view>
		<view class="not-more" v-else-if="notMore">没有更多了...</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { hideLoading, showLoading } from '@/common/util';
	import api from '@/common/api';
	const isLoading = ref(false)
	const pageList = ref([])
	const notMore = ref(true)
	let pageType = ref('')
	const classList = ref([
		{ title: '全部', id: '', ico: '\ue701', icoColor: '#77CC17' },
		{ title: '农场活动', id: '2', ico: '\ue65e', icoColor: '#FD4C40' },
		{ title: '农场资讯', id: '1', ico: '\ue60b', icoColor: '#148AF4' },
	])
	onMounted(async () => {
		getPageList()
	})
	const pageTypeChage = (id : string) => {
		pageType.value = id
		getPageList()
	}
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.getNewsList({ categoryId: pageType.value })
			pageList.value = res.data || []
		} finally {
			hideLoading()
			isLoading.value = false
		}

	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const getStateName=(state:string)=>{
		const obj={
			1:'未开始',
			2:'进行中',
			3:'已结束'
		}
		return obj[state+''] || ''
	}
</script>

<style lang="scss">
	.activity-container {
		padding: 20rpx;
		padding-bottom: 120rpx;

		.class-list {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow: auto;
			margin-bottom: 20rpx;

			.yuan-btn {
				display: inline-flex;
				height: 68rpx;
				border-radius: 68rpx;
				padding: 0 20rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				font-size: 26rpx;
			}

			.iconfont {
				margin-right: 15rpx;
				font-size: 30rpx;
			}

			.active-btn {
				background-color: #77CC17;
				color: #fff;

				.iconfont {
					color: #fff !important;
				}
			}
		}

		.page-list {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			padding: 20rpx;
		}

		.list-top {
			display: flex;
			align-items: center;
			border-bottom: solid 1px #C8C8C8;
			padding-bottom: 15rpx;
			position: relative;
		}

		.data-imgico {
			position: absolute;
			width: 110rpx;
			height: 50rpx;
			z-index: 10;
			top: 0;
			left: 0;
			background-color: #77CC17;
			color: #fff;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx 0 20rpx 0;
		}

		.data-bg {
			width: 200rpx;
			height: 200rpx;
			border-radius: 14rpx;
			display: block;
			flex-shrink: 0;
		}

		.data-content {
			margin-left: 15rpx;
			flex-grow: 1;
		}

		.list-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.list-info {
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}

		.list-bottom {
			padding-top: 15rpx;
			display: flex;
			align-items: center;

			.yuan-btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 60rpx;
			}
		}

		.list-header {
			position: relative;
			width: 18rpx;
		}

		.header-bg {
			width: 36rpx;
			height: 36rpx;
			border-radius: 36rpx;
			display: block;
		}

		.list-content {
			flex-grow: 1;
			font-size: 26rpx;
			color: #5B5B5B;
			margin-left: 35rpx;
		}

	}
</style>